<!DOCTYPE html>
<!-- dragNDrop.html
     An example to illustrate the DOM 2 Event model
     Allows the user to drag and drop words to complete
     a short poem
     Does not work with IE browsers before IE9
     -->
<html lang = "en">
  <head>
    <title> Drag and drop </title>
    <meta charset = "utf-8" />
    <script type = "text/javascript"  src = "dragNdrop.js" >
    </script>
  </head>
  <body style = "font-size: 1.7em;">
    <p>
      Roses are red <br />
      Violets are blue <br />

      <span style = "position: absolute; top: 200px; left: 0px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> candy </span>
      <span style = "position: absolute; top: 200px; left: 75px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> cats </span>
      <span style = "position: absolute; top: 200px; left: 150px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> cows </span>
      <span style = "position: absolute; top: 200px; left: 225px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> glue </span>
      <span style = "position: absolute; top: 200px; left: 300px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> is </span>
      <span style = "position: absolute; top: 200px; left: 375px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> is </span>
      <span style = "position: absolute; top: 200px; left: 450px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> meow </span>
      <span style = "position: absolute; top: 250px; left: 0px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> mine </span>
      <span style = "position: absolute; top: 250px; left: 75px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> moo </span>
      <span style = "position: absolute; top: 250px; left: 150px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> new </span>
      <span style = "position: absolute; top: 250px; left: 225px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> old </span>
      <span style = "position: absolute; top: 250px; left: 300px;  
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> say </span>
      <span style = "position: absolute; top: 250px; left: 375px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> say </span>
      <span style = "position: absolute; top: 250px; left: 450px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> so </span>
      <span style = "position: absolute; top: 300px; left: 0px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> sticky </span>
      <span style = "position: absolute; top: 300px; left: 75px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> sweet </span>
      <span style = "position: absolute; top: 300px; left: 150px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> syrup </span>
      <span style = "position: absolute; top: 300px; left: 225px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> too </span>
      <span style = "position: absolute; top: 300px; left: 300px;
                     background-color: lightgrey;"
            onmousedown = "grabber(event);"> yours </span>
    </p>
  </body>
</html>

